<template>
	<view>
		<u-navbar :is-back="false" title="首页" :is-fixed="true" title-color="#000" :border-bottom="false">
			<view class="slot-wrap">
				<view class="navbar-right">
					<view class="message-box right-item" @click="jump('pages/user/news')">
						<u-badge :is-dot="true" type="error" is-center :count="unReadNumber"></u-badge>
						<u-icon name="chat" size="40"></u-icon>
					</view>
				</view>
			</view>
		</u-navbar>
		<view class="content">
			<view class="swipper_wrp">
				<u-swiper :list="carousels" :height="400" name="imageUrl" :border-radius="0" @click="swiperJump" interval="5000">
				</u-swiper>
			</view>
			<!-- 	 跳转职业规划 -->
			<view style="margin: 26rpx 10rpx 16rpx 10rpx" url="/pages/index/guide" @click="itemJump(guide)">
				<image :src="guide.homeImage" mode="widthFix" style="width: 100%;"></image>
			</view>
			<!-- 我的职业规划 -->
			<view style="margin: 0rpx 10rpx 30rpx 10rpx;" url="/package/myPlan/myPlan" @click="itemJump(plan)">
				<image :src="plan.homeImage" style="width: 100%;" mode="widthFix"></image>
			</view>
		</view>
		<!-- 课程 -->
		<view class="home_record record_list u-p-l-10 u-m-b-30" v-if="course.length">
			<view class="u-p-b-30 u-flex flex-between">
				<view class="font-b font-36" style="color: #363637">课程</view>
				<navigator url="/package/curriculum/index" class="u-p-r-20 u-font-xs color-999">
					更多
					<u-icon name="arrow-right" size="20" color="#999"></u-icon>
				</navigator>
			</view>
			<scroll-view scroll-x class="u-p-r-10 scroll-x">
				<navigator :url="`/package/curriculum/detail?id=${item.id}`" class="courseItem"
					v-for="(item, index) in course" :key="index">
					<image :src="item.titlePage" alt="" class="courseImg">
				</navigator>
			</scroll-view>
		</view>
		<view class="home_record record_list u-p-l-10 u-m-b-30" v-if="actList.length">
			<view class="u-p-b-30 u-flex flex-between">
				<view class="font-b font-36" style="color: #363637">精选活动</view>
				<navigator url="/pages/index/act/list" class="u-p-r-20 u-font-xs color-999">
					更多
					<u-icon name="arrow-right" size="20" color="#999"></u-icon>
				</navigator>
			</view>
			<view class="u-flex flex-between u-flex-wrap u-p-r-10">
				<navigator :url="`/pages/index/act/index?id=${item.id}`" class="item u-m-b-16"
					v-for="(item, index) in actList" :key="index">
					<img :src="item.indexImage" alt="" class="img">
				</navigator>
			</view>
		</view>
		<!--案列-->
		<view class="home_record record_list u-p-l-10 u-p-r-10 u-p-b-30" v-if="studyList.length">
			<view class="u-p-b-30 u-flex flex-between">
				<view class="font-b font-36" style="color: #363637">案例介绍</view>
				<navigator url="/pages/index/study/list" class="u-p-r-10 u-font-xs color-999">
					更多
					<u-icon name="arrow-right" size="20" color="#999"></u-icon>
				</navigator>
			</view>
			<scroll-view scroll-x class="u-p-r-10 scroll-x">
				<navigator :url="`/pages/index/study/index?id=${item.id}`" class="scroll-item item u-m-b-10"
					v-for="(item, index) in studyList" :key="index">
					<img :src="item.indexImage" alt="" class="img">
				</navigator>
			</scroll-view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		request
	} from "../../util/api";
	import {
		SWIPER_JUMP
	} from "../../util/util";

	export default {
		data() {
			return {
				unReadNumber: 0,
				carousels: [],
				homeList: [],
				guide: {},
				plan: {},
				actList: [],
				studyList: [],
				//课程数据
				course: []

			}
		},

		onShow() {
			this.getLogin()
		},

		mounted() {
			this.getInfo()
			//this.getActList()
			//this.getStudyList()
		},
		methods: {
			getLinkUrl(path, index) {
				let ret_url = {}
				switch (path) {
					case '测评页面':
						ret_url.url = '/pages/pince/index'
						ret_url.type = 'switchTab'
						break;
					case '产品详情':
						ret_url.url = '/pages/index/product_detail?index=' + index
						ret_url.type = 'navigateTo'
						break
				}
				return ret_url
				console.log(ret_url)
			},

			jump(path, type) {
				if (type) {
					this.$u.route({
						url: path,
						type
					})
				} else {
					this.$u.route({
						url: path
					})
				}
			},

			swiperJump(res) {
				SWIPER_JUMP(this.carousels[res].linkUrl)
			},

			getLogin() {
				var user = uni.getStorageSync(process.env.NODE_ENV + 'zbz_user');
				if (user && user.token) {
					this.getUnReadNumber();
				}
			},

			getUnReadNumber() {
				request({
					url: '/app/userCenter/getUnReadNumber'
				}).then(ret => {
					this.unReadNumber = '';
					if (ret.data) {
						this.unReadNumber = ret.data;
					}
				})
			},

			getInfo() {
				request({
					url: '/app/index/new/info',
					token: true
				}).then(res => {
					console.log(res)
					this.carousels = res.data.carousels
					const homeData = res.data.homeList
					this.course = res.data.recomendList
					for (const item of homeData) {
						if (item.url === '/package/myPlan/myPlan') {
							item.classStyle = 1
							this.plan = item
						}
						if (item.url === '/pages/index/guide') {
							item.classStyle = 2
							this.guide = item
						}
					}
					this.studyList = res.data.caseStudyList.filter(item => item.indexChosen)
					this.actList = res.data.actInfoList.filter(item => item.isChosen)
				})
			},
			itemJump(item) {
				if (item.url) {
					const url = item.url.includes('switchTab:') ? item.url.split('switchTab:')[1] : item.url
					if (url == '/pages/pince/index') {
						var user = uni.getStorageSync(process.env.NODE_ENV + 'zbz_user')
						if (user && user.token) {
							request({
								url: '/app/goods/buyDetail'
							}).then(res => {
								if (res.data.isBuy) {
									const diffStamp = new Date(res.data.endTestDate).getTime() - new Date()
										.getTime()
									if (diffStamp > 0) {
										this.$u.route({
											url: url,
											type: item.url.includes('switchTab:') ? 'switchTab' :
												'navigateTo'
										})
									} else {
										this.$u.route({
											url: '/pages/goods/index'
										})
									}
								} else {
									this.$u.route({
										url: '/pages/goods/index'
									})
								}
							})
						} else {
							uni.reLaunch({
								url: '/package/login/wx_login'
							})
						}
					} else {
						this.$u.route({
							url: url,
							type: item.url.includes('switchTab:') ? 'switchTab' : 'navigateTo',
							params: {
								homeListTouchId: item.id
							}
						})
					}
				}
			},
			// 跳转到职业生涯指北
			toCurriculum() {
				uni.navigateTo({
					url: "/pages/index/guide"
				})
			}
			/*// 线下活动
			getActList() {
			  request({
			    url: '/system/wx/CompassActInfo/list',
			    token: true,
			    data: {
			      pageNum: 1,
			      pageSize: 999
			    }
			  }).then(res=> {

			    console.log(this.actList)
			  })
			},

			// 案列
			getStudyList() {
			  request({
			    url: '/system/wx/CompassCaseStudy/list',
			    token: true,
			    data: {
			      pageNum: 1,
			      pageSize: 999
			    }
			  }).then(res=> {
			    this.studyList = res.rows.filter(item => item.indexChosen)
			    console.log(this.studyList)
			  })
			}*/
		},

		onShareAppMessage(res) {}
	}
</script>

<style lang="scss">
	.navbar-right {
		margin-right: 24rpx;
		display: flex;
	}

	.right-item {
		margin: 0 20rpx;
		position: relative;
		display: flex;
	}

	.courseItem {
		display: inline-block;
		width: 530rpx;
		height: 232rpx;
		margin-right: 14rpx;

		.courseImg {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}

	.link-wrapper {
		.item-link {
			width: 100%;
			height: 250upx;

			.item-link-img {
				width: 100%;
				height: 250upx;
			}
		}
	}

	.home_record {
		width: 100%;
		overflow: hidden;

		.item {
			width: 358upx;
			height: 210upx;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		.scroll-x {
			width: 100%;
			height: 232upx;
			overflow: hidden;
			white-space: nowrap;
		}

		.scroll-item {
			display: inline-block;
			width: 220upx;
			height: 220upx;
			margin-right: 10upx;
		}
	}

	.planning {
		margin: 20rpx, 10rpx;
	}
</style>
